<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code {
            width: 80px;
            text-align: center;
            font-style: italic;
            letter-spacing: 2px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>验证码练习</h2>
    <input id="codeInp" type="text" placeholder="请输入验证码">
    <input id="code" type="text" disabled value="">
    <button id="refresh">刷新验证码</button>
    <button id="btn">验证</button>

    <script src="../js/tools.js"></script>
    <script>

        // 页面中的标签都可以称为对象
        

        // 页面中会有很多的标签对象


        // 完成一个功能的时候，需要用到哪些标签对象
        //    1 把需要的对象拿到手
        //    2 实现功能


        // 获取元素   document.getElementById('id') 
        //    如果获取不到   null    

        // 获取输入框的值   var m = inp.value

        // 给输入框赋值   inp.value = 12345;


        // 点击事件的语法  obj.onclick = function(){}

        var a = 1 ;
        a = a + 1 ;






        // 获取输入框        get获取  element元素   By通过  
        var a = document.getElementById('codeInp') ;
        console.log(a) ;   // 测试是否拿到    获取不到的时候，就会得到null  -> 空对象

        // 获取验证码的框
        var b = document.getElementById('code') ;
        console.log(b) ;

        // 获取刷新按钮
        var c = document.getElementById('refresh') ;
        console.log(c) ;

        // 获取验证按钮
        var d = document.getElementById('btn') ;
        console.log(d);


        // 2 显示验证码

        // 这个框的value值等于验证码
        b.value = randCode();


        // 3 刷新
        //   点击刷新按钮 
        //   给一个对象绑定点击事件的语法   obj.onclick = function(){点击要执行的代码;}
        c.onclick = function(){
            // 重新生成一个验证码，放在框里面
            b.value = randCode() ;
        }



        // 4 验证
        //   给验证按钮绑定点击事件
        d.onclick = function() {
            // alert(1);   // 测试点击事件是否成功
            // 比较输入框的值和验证码中的值是否相等
            // 先要获取输入框的值
            var m = a.value ;
            // 获取验证码的值
            var n = b.value ;
            // 判断是否相等
            if(m === n) {
                alert('ok') ;
            }
            else {
                alert('err');
                // 输入框清空
                a.value = '';
                // 验证码要刷新
                // 重新生成一个验证码，放在框里面
                b.value = randCode() ;
            }
        }


    </script>
    
</body>
</html>